/* eslint-disable no-use-before-define */
/* eslint-disable react/react-in-jsx-scope */
import React, { Component } from 'react';
import {
    View,
    StyleSheet,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'
import { Icon } from '../component'
import config from '../config';
import Speech from './speech';
import Yuque from './yuque';
import Todo from './todo';

export default class Home extends Component {
    state = {
        selectedTab: 'Speech',
    }

    render() {
        return (
            <View style={{ width: '100%', flex: 1, backgroundColor: '#fff', }}>
                <TabNavigator tabBarStyle={styles.tarbar} >
                    <TabNavigator.Item
                        onPress={() => {
                            this.setState({ selectedTab: 'Speech' })
                        }}
                        renderIcon={() => <Icon name={'icon_wechat'} />}
                        renderSelectedIcon={() => <Icon color={config.themeColor} name={'icon_wechat'} />}
                        selected={this.state.selectedTab === 'Speech'}
                    // selectedTitleStyle={styles.selectedTabText}
                    // title="话术"
                    // titleStyle={styles.tabText}
                    >
                        <Speech />
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        onPress={() => {
                            this.setState({ selectedTab: 'Todo' })
                        }}
                        renderIcon={() => <Icon name={'icon_workmore'} />}
                        renderSelectedIcon={() => <Icon color={config.themeColor} name={'icon_workmore'} />}
                        selected={this.state.selectedTab === 'Todo'}
                    // selectedTitleStyle={styles.selectedTabText}
                    // title="任务"
                    // titleStyle={styles.tabText}
                    >
                        <Todo />
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        onPress={() => {
                            this.setState({ selectedTab: 'Yuque' })
                        }}
                        renderIcon={() => <Icon name={'icon_study'} />}
                        renderSelectedIcon={() => <Icon color={config.themeColor} name={'icon_study'} />}
                        selected={this.state.selectedTab === 'Yuque'}
                    // selectedTitleStyle={styles.selectedTabText}
                    // title="语雀"
                    // titleStyle={styles.tabText}
                    >
                        <Yuque />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    tarbar: {
        // marginBottom: config.safeArea.bottom,
        backgroundColor: '#fff',
    },
    tabText: {
        fontSize: 10,
        color: 'black',
        marginBottom: 6
    },
    selectedTabText: {
        fontSize: 10,
        color: config.themeColor,
        marginBottom: 6
    },
});